<script lang="ts" setup>
import { ref } from 'vue';
import { DialogResult, SecsFormat } from '../../common/enums';
import { MatchRule, ReceiveAction } from '../../common/types';

const props = defineProps<{ data: ReceiveAction }>();
const data = ref(props.data);
const emits = defineEmits(['close']);
const activeNames = ref(['matchRules', 'performAction'])
const save = () => {
    data.value.matchRules = matchRules.value.filter(x => x.name != null && x.name != "");
    data.value.perforAction = performActions.value.filter((x:any) => x.transactionName != null && x.transactionName!="");
    emits('close', DialogResult.Ok);
};
const cancel = () => {
    emits('close', DialogResult.Cancel);
};
const matchRules = ref<MatchRule[]>(data.value.matchRules.slice(0));
const performActions = ref<any>(data.value.matchRules.slice(0));

const addMatchRule = () => {
    matchRules.value.splice(0, 0, {
        name: "",
        format: SecsFormat.Unknow,
        value: null
    })
}
const addPerformAction = () => {
    performActions.value.splice(0, 0, { transactionName: "" })
}

const handleMRDelete = (index: number, row: MatchRule) => {
    matchRules.value.splice(index, 1);
    console.log(row);
}

const handleSPDelete = (index: number, row: any) => {
    performActions.value.splice(index, 1);
    console.log(row);
}

</script>

<template>
    <el-container>
        <el-header class="app-toolbar-3">
            <el-button type="primary" @click="save">Save</el-button>
            <el-button @click="cancel">Cancel</el-button>
        </el-header>
        <el-main style="padding:10px">
            <table class="app-table-1">
                <tbody>
                    <tr>
                        <th>Reply Secondary</th>
                        <td>
                            <el-switch v-model="props.data.replySecondary" />
                        </td>
                        <th>
                            <el-button @click="addMatchRule">Add Match Rule</el-button>
                        </th>
                        <th>
                            <el-button @click="addPerformAction">Add Primary</el-button>
                        </th>
                    </tr>
                </tbody>
            </table>
            <el-scrollbar height="260px">
                <el-collapse v-model="activeNames">
                    <el-collapse-item title="Match rules" name="matchRules">
                        <el-table :data="matchRules" stripe>
                            <el-table-column prop="name" label="name">
                                <template #default="scope">
                                    <el-select v-model="scope.row.name" filterable>
                                        <el-option v-for="item in props.data.namesInTransaction" :label="item"
                                            :value="item">
                                        </el-option>
                                    </el-select>
                                </template>
                            </el-table-column>
                            <el-table-column prop="format" label="format">
                                <template #default="scope">
                                    <el-select v-model="scope.row.format" filterable>
                                        <el-option label="Unknow" value="Unknow"></el-option>
                                        <el-option label="List" value="List"></el-option>
                                        <el-option label="Binary" value="Binary"></el-option>
                                        <el-option label="Boolean" value="Boolean"></el-option>
                                        <el-option label="AscII" value="AscII"></el-option>
                                        <el-option label="Jis8" value="Jis8"></el-option>
                                        <el-option label="I8" value="I8"></el-option>
                                        <el-option label="I1" value="I1"></el-option>
                                        <el-option label="I2" value="I2"></el-option>
                                        <el-option label="I4" value="I4"></el-option>
                                        <el-option label="F8" value="F8"></el-option>
                                        <el-option label="F4" value="F4"></el-option>
                                        <el-option label="U8" value="U8"></el-option>
                                        <el-option label="U1" value="U1"></el-option>
                                        <el-option label="U2" value="U2"></el-option>
                                        <el-option label="U4" value="U4"></el-option>
                                    </el-select>
                                </template>
                            </el-table-column>
                            <el-table-column prop="value" label="value">
                                <template #default="scope">
                                    <el-input v-model="scope.row.value">
                                    </el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="Operation" width="80">
                                <template #default="scope">
                                    <el-button type="danger" size="small"
                                        @click="handleMRDelete(scope.$index, scope.row)">
                                        Delete
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-collapse-item>

                    <el-collapse-item title="Send Primary" name="performAction">
                        <el-table :data="performActions" stripe>
                            <el-table-column prop="transactionName" label="Transaction name" >
                                <template #default="scope">
                                    <el-select v-model="scope.row.transactionName" filterable>
                                        <el-option v-for="item in props.data.transactionNames" :label="item"
                                            :value="item">
                                        </el-option>
                                    </el-select>
                                </template>
                            </el-table-column>
                            <el-table-column label="Operation" width="80">
                                <template #default="scope">
                                    <el-button type="danger" size="small"
                                        @click="handleSPDelete(scope.$index, scope.row)">
                                        Delete
                                    </el-button>
                                </template>
                            </el-table-column>                            
                        </el-table>
                    </el-collapse-item>
                </el-collapse>
            </el-scrollbar>
        </el-main>
    </el-container>

</template>